<template>
	<view class="app_main">
		<NavTabbar activeTab="home"></NavTabbar>
		<router-view />
		<!-- <nav-tabbar activeTab="home"></nav-tabbar> -->
		<view class="navbar">
			<view class="fixed">
				<!-- 状态栏 时间 电量 信号 -->
				<view :style="{height: navbarStatusHeight + 'px'}"></view>
				<!-- #ifdef H5 || APP-PLUS || MP-ALIPAY -->
				<view class="navbar-content">
					<!-- 暂时先隐藏，后续可能会放出来 -->
					<!-- <uni-icons
						type="settings-filled"
						@click="onClickOpen"
						color="#fff"
						size="26"
						class="back_btn"
					></uni-icons> -->
					<view class="navBar">
						<view>{{ store.state.userInfo.customer }}</view>
					</view>
				</view>
				<!-- #endif -->
				<!-- #ifndef H5 || APP-PLUS || MP-ALIPAY -->
				<!-- 胶囊按钮左侧位置 -->
				<view
					class="navbar-content"
					:style="{width: '100%', height: navBarHeight + 'px'}"
				>
					<uni-icons
						type="settings-filled"
						color="#fff"
						@click="onClickOpen"
						size="26"
						class="back_btn"
					></uni-icons>
					<view class="navBar">
						<view>{{ store.state.userInfo.customer }}</view>
					</view>
				</view>
				<!-- #endif -->
			</view>
			<!-- 设置占位 将微信小程序的状态栏高度预留出来 -->
			<!-- <view :style="{height:navbarStatusHeight+navBarHeight+'px' }"></view> -->
		</view>
		<scroll-view class="scroll_box" scroll-y="true">
			<view class="conten_block">
				<view class="logo_top">
					<view class="img">
						<image
							mode="aspectFill"
							@click="lookPic(store.state.userInfo.avatar)"
							class="user_img"
							v-if="store.state.userInfo.avatar"
							:src="store.state.userInfo.avatar"
						/>
						<uni-icons
							size="100"
							color="#007cff"
							type="contact"
							v-else
						></uni-icons>
					</view>
					<view class="user_inf">
						<view class="user_name">
							<view class="name">
								{{ store.state.userInfo.name }}
								<Popover
									:imgSrc="medalSrc"
									:textColor="medalColor"
									:popoverContent="store.state.userInfo.networkEmplevel"
								/>
								<!-- <view class="finishOrderQtytext">
									{{finishOrderQty}}单
								</view> -->
								<!-- <image :src="medalSrc" class="medal" mode=""></image>
								<view class="MasterType" :style="{ color: medalColor }">
									{{ store.state.userInfo.networkEmplevel }}
								</view> -->
							</view>
							<view class="phone_tip">
								服务商：{{ store.state.userInfo.network }}
							</view>
							<view class="inviteCode">
								邀请码：
								<text
									class="code"
									@click="toCopy(store.state.userInfo.inviteCode)"
								>
									{{ store.state.userInfo.inviteCode }}
								</text>
							</view>
						</view>
						<view
							class="super_manager"
							v-if="store.state.userInfo.roleType == 1"
						>
							超管
						</view>
						<view
							class="super_manager"
							v-else-if="store.state.userInfo.roleType == 2"
						>
							管理员
						</view>
						<view class="super_manager" v-else>工程师</view>
					</view>
				</view>
				<view class="menus">
					<template v-for="(item, index) in qtyList">
						<view
							v-if="
								!item.isOnlyM ||
								(item.isOnlyM &&
									(store.state.userInfo.roleType == 1 ||
										store.state.userInfo.roleType == 2))
							"
							class="item"
							:key="index"
							@click="goOrderList(index)"
						>
							<view
								class="qty"
								:class="
									index == 0 || index == 1 || index == 2 || index == 3
										? 'red_qty'
										: ''
								"
							>
								{{ item.qty }}
							</view>
							<view class="title">
								{{ item.title }}
							</view>
						</view>
					</template>
				</view>
				<muen-list></muen-list>
			</view>
		</scroll-view>
		<uni-popup ref="popupLeft" type="left" background-color="#fff">
			<view class="muen_sidebar">
				<view class="logo_top">
					<view class="img">
						<image
							mode="aspectFill"
							@click="lookPic(store.state.userInfo.avatar)"
							class="user_img"
							v-if="store.state.userInfo.avatar"
							:src="store.state.userInfo.avatar"
						/>
						<uni-icons
							size="100"
							color="#007cff"
							type="contact"
							v-else
						></uni-icons>
					</view>
					<view class="user_inf">
						<view class="user_name">
							<view class="name">
								{{ store.state.userInfo.name }}
							</view>
							<view class="phone_tip">
								{{ store.state.userInfo.phone }}
							</view>
						</view>
					</view>
				</view>
				<uni-list :border="false">
					<!-- <uni-list-item clickable :border="false" thumb="/static/network/home/cum_icon/money.svg"
						thumb-size="sm">
						<template v-slot:body>
							<view class="slot-box">
								<view class="slot-text">
									今日预计结算：
								</view>
								<view class="slot_qty">
									￥{{getSidebarDataObj?.toBeExpectedToSettlementQty||0.00}}
								</view>
							</view>
						</template>
					</uni-list-item> -->
					<uni-list-item
						clickable
						:border="false"
						thumb="/static/network/home/cum_icon/order.svg"
						thumb-size="sm"
					>
						<template v-slot:body>
							<view class="slot-box">
								<view class="slot-text">今日完成单量：</view>
								<view class="slot_qty">
									{{ getSidebarDataObj?.todayFinishOrderQty || 0 }}
								</view>
							</view>
						</template>
					</uni-list-item>
					<!-- 	<uni-list-item title="消息中心" @click="tabClick" :border="false" clickable thumb="/static/network/home/cum_icon/msg.svg"
						thumb-size="sm">
						<template v-slot:footer>
							<view class="slot_footer">
								{{getSidebarDataObj?.messageQty||0}}
							</view>
						</template>
					</uni-list-item> -->
					<!-- 	<uni-list-item title="认证中心" @click="tabClick" :border="false" clickable thumb="/static/network/home/cum_icon/auth.svg"
						thumb-size="sm" /> -->
					<uni-list-item
						title="设置"
						@click="tabClick"
						clickable
						:border="false"
						thumb="/static/network/home/cum_icon/set.svg"
						thumb-size="sm"
					/>
					<uni-list-item
						title="关于"
						@click="tabClick"
						clickable
						:border="false"
						thumb="/static/network/home/cum_icon/about.svg"
						thumb-size="sm"
					/>
				</uni-list>
			</view>
		</uni-popup>
	</view>
</template>

<script setup lang="ts">
	import {ref, onMounted, reactive, watch} from 'vue';
	import MuenList from './component/MuenList.vue';
	import store from '@/store_network/index.js';
	import {
		onReachBottom,
		onPullDownRefresh,
		onUnload,
		onLoad,
		onHide,
		onShow,
	} from '@dcloudio/uni-app';
	import NavTabbar from '@/components/u-network/nav-tabbar.vue';
	import apiNetwork from '@/util/network_api/network.js';
	import apiOrder from '../../../util/network_api/apiOrder';
	import {computed} from 'vue';
	import Popover from './Popover.vue';
	onShow(async () => {
		//显示加载框
		uni.showLoading({
			title: '加载中',
		});
		await getToDoQtyObj();
		// 获取用户信息
		await store.dispatch('getUpdataUser');
		//隐藏加载框
		uni.hideLoading();
	});
	// 监听角色变化
	watch(
		() => store.state.isRole,
		() => {
			getToDoQtyObj();
		},
	);
	onUnload(() => {
		uni.hideLoading();
	});
	// 预览图片
	const lookPic = (list) => {
		if (!list) return;
		uni.previewImage({
			urls: [list],
		});
	};
	const qtyList = ref([
		{title: '待接单', qty: 0},
		{title: '待派工', qty: 0, isOnlyM: true},
		{title: '未拨打', qty: 0},
		{title: '未预约', qty: 0},
		{title: '未签到', qty: 0},
		{title: '待核销', qty: 0},
		{title: '待审核', qty: 0},
		{title: '已完成', qty: 0},
		{title: '全部工单', qty: 0},
		// { title: '超时未预约', qty: 0 },
		// { title: '超时未上门', qty: 0 },
		// { title: '超时未拨打', qty: 0 }
	]);
	const popupLeft = ref();
	const navbarStatusHeight = ref(0);
	const navBarHeight = ref(0);
	const navBarWidth = ref(375);
	// 个人等级
	const medalMap = {
		普通师傅: {src: '../../../static/ordinary.svg', color: 'rgb(81, 81, 81)'},
		金牌师傅: {src: '../../../static/gold.svg', color: 'rgb(242, 198, 65)'},
		银牌师傅: {src: '../../../static/silver.svg', color: 'rgb(166, 166, 166)'},
		铜牌师傅: {src: '../../../static/bronze.svg', color: 'rgb(231, 178, 61)'},
	};
	const medalInfo = computed(() => {
		return (
			medalMap[store.state.userInfo.networkEmplevel] || {src: '', color: ''}
		);
	});
	const medalSrc = computed(() => medalInfo.value.src);
	const medalColor = computed(() => medalInfo.value.color);

	onMounted(() => {
		const info = uni.getSystemInfoSync();
		navbarStatusHeight.value = info.statusBarHeight;
		// 根据微信小程序的右上侧的胶囊样式 设置导航栏内容的高度
		// 条件编译 以下三个不支持胶囊样式
		// #ifndef H5 || APP-PLUS || MP-ALIPAY
		const menuInfo = uni.getMenuButtonBoundingClientRect();
		// 导航栏内容的高度 = (胶囊底部的高度 - 状态栏的高度) + (胶囊顶部的高度 - 状态栏的高度)
		navBarHeight.value =
			menuInfo.bottom -
			info.statusBarHeight +
			(menuInfo.top - info.statusBarHeight);
		// 导航栏内容的宽度  除开胶囊按钮左侧的内容宽度
		navBarWidth.value = menuInfo.left;
		// #endif
	});
	// 获取
	let getSidebarDataObj = ref();
	const onClickOpen = () => {
		popupLeft.value.open();
		apiNetwork.getSidebarData().then((res) => {
			getSidebarDataObj.value = res.data.rows;
		});
	};
	let finishOrderQty = ref<number | ''>(''); // 已完成的工单
	const getToDoQtyObj = async () => {
		await apiOrder.getNetworkOrderListStatusQty({keyword: ''}).then((res) => {
			if (res.code == 20000) {
				let item = res.data.row;
				qtyList.value = qtyList.value.map((o, index) => {
					switch (index) {
						case 0:
							o.qty = item.waitReceivingOrderStatusQty;
							break;
						case 1:
							o.qty = item.waitDispatchStatusQty;
							break;
						case 2:
							o.qty = item.waitCallPhoneQty;
							break;
						case 3:
							o.qty = item.waitReservationQty;
							break;
						case 4:
							o.qty = item.waitSignQty;
							break;
						case 5:
							o.qty = item.hxWaitQty;
							break;
						case 6:
							o.qty = item.waitSignQty;
							break;
						case 7:
							o.qty = item.finishOrderQty;
							finishOrderQty.value = item.finishOrderQty;
							break;
						case 8:
							o.qty = item.total;
							break;
					}
					return o;
				});
			}
		});
	};

	const goOrderList = (index: number) => {
		let statusParent = null;
		let childStatus = null;
		switch (index) {
			case 0:
				// 待接单
				statusParent = 1;
				childStatus = null;
				break;
			case 1:
				// 待派工
				statusParent = 2;
				childStatus = null;
				break;
			case 2:
				// 未拨打
				statusParent = 4;
				childStatus = 4;
				break;
			case 3:
				// 未预约
				statusParent = 4;
				childStatus = 5;
				break;
			case 4:
				// 未签到
				statusParent = 4;
				childStatus = 6;
				break;
			case 5:
				// 待核销
				statusParent = 8;
				childStatus = null;
				break;
			case 6:
				// 待审核
				statusParent = 4;
				childStatus = null;
				break;
			case 7:
				// 已完成
				statusParent = 6;
				childStatus = null;
				break;
			case 8:
				// 全部
				statusParent = null;
				childStatus = null;
				break;
		}
		uni.redirectTo({
			url:
				'/pages/pages_network/order/order?statusParent=' +
				statusParent +
				'&childStatus=' +
				childStatus,
		});
	};
	const tabClick = () => {
		uni.showToast({
			title: '正在维护中，敬请期待...',
			duration: 800,
			icon: 'none',
		});
	};

	// 复制邀请码
	const toCopy = (data) => {
		uni.setClipboardData({
			data,
			success: function () {
				uni.showToast({
					title: '复制成功！',
					icon: 'none',
				});
			},
		});
	};
</script>

<style lang="scss" scoped>
	.app_main {
		width: 100%;
		height: 100vh;
		background-image: url('@/static/network/bg_main.png');
		background-repeat: no-repeat;
		background-size: cover;
		background-position: top;
		overflow-y: hidden;

		.fixed {
			// position: fixed;
			top: 0;
			left: 0;
			z-index: 99;
			width: 100%;

			.navbar-content {
				position: relative;
				display: flex;
				align-items: center;
				width: 100%;
				height: 80rpx;

				.back_btn {
					margin-left: 24rpx;
					position: relative;
					z-index: 9;
				}

				.navBar {
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
					position: absolute;
					top: 0;
					bottom: 0;
					width: 100%;
					height: 100%;
					font-size: 32rpx;
					font-weight: bold;
					color: #fff;
				}
			}
		}

		.scroll_box {
			height: 100%;
		}

		.conten_block {
			padding-bottom: 200rpx;

			.menus {
				display: flex;
				flex-wrap: wrap;
				text-align: center;
				margin: 32rpx;
				background-color: #fff;
				padding-bottom: 30rpx;
				border-radius: 16rpx;
				// box-shadow: 0 0 4rpx 2rpx #eee;
				border: 1rpx solid #eee;

				.item {
					width: calc(100% / 3);
					margin-top: 32rpx;

					.title {
						// margin-top: 10rpx;
						font-size: 26rpx;
					}

					.qty {
						font-size: 60rpx;
						font-weight: bold;
						color: #00c0c0;
					}

					.red_qty {
						color: rgba(245, 108, 108, 1);
					}

					.gree_qty {
						color: #00c0c0;
					}
				}
			}
		}

		.muen_sidebar {
			width: 70vw;
			background-color: #fff;

			.logo_top {
				padding: 90rpx 30rpx 60rpx;
				background: linear-gradient(#007cff 0%, #007cff2b 70%);

				.img {
					width: 160rpx;
					height: 160rpx;
					border-radius: 50%;
					margin-right: 20rpx;

					.user_img {
						width: 160rpx;
						height: 160rpx;
					}
				}

				.name {
					font-size: 36rpx;
				}
			}

			:deep(.uni-list) {
				padding: 14rpx 0;

				.uni-list-item__content-title {
					font-size: 28rpx;
				}

				.uni-list-item {
					padding: 12rpx 0;

					.slot-box {
						flex: 1;
						display: flex;
						align-items: center;

						.slot-text {
							font-size: 28rpx;
						}

						.slot_qty {
							font-size: 28rpx;
							color: rgba(245, 108, 108, 1);
						}
					}

					.slot_footer {
						background: rgba(245, 108, 108, 1);
						border-radius: 20rpx;
						padding: 4rpx 12rpx;
						color: #fff;
						font-size: 22rpx;
					}
				}
			}
		}
	}

	.logo_top {
		display: flex;
		padding: 50rpx 32rpx 20rpx;

		.img {
			width: 110rpx;
			height: 110rpx;
			border-radius: 50%;
			margin-right: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			overflow: hidden;
			background-color: #fff;

			.user_img {
				width: 110rpx;
				height: 110rpx;
			}
		}

		.user_inf {
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex: 1;

			.user_name {
				display: flex;
				flex-direction: column;

				flex: 1;
				flex-wrap: wrap;
				word-wrap: break-word;
				word-break: break-all;
				gap: 20rpx;

				.medal {
					width: 40rpx;
					height: 40rpx;
					margin: 0 5rpx 0 15rpx;
				}

				.MasterType {
					font-size: 20rpx;
					padding: 6rpx;
					background-color: #fff;
					position: absolute;
					right: 0;
				}

				.name {
					display: flex;
					align-items: center;
					color: #000;
					font-size: 35rpx;
					margin-right: 14rpx;
				}

				.phone_tip {
					// margin-top: 10rpx;
					color: rgba(85, 85, 85, 1);
					font-size: 28rpx;
				}
				.inviteCode {
					color: rgba(85, 85, 85, 1);
					.code {
						color: #007cff;
					}
				}
			}

			.super_manager {
				font-size: 22rpx;
				background-color: #007cff;
				color: #fff;
				padding: 8rpx 16rpx;
				border-radius: 4rpx;

				margin-left: 12rpx;
			}
		}
	}
	.finishOrderQtytext {
		font-weight: bold;
		margin-left: 10rpx;
	}
</style>
